<template>
  <common-list-tabs>
    <template v-if="isReport">
      <report slot="default" ref="report" :type="type" :reportData="reportData" @close="closeReport"></report>
    </template>

    <common-tabs slot="tabs" v-model="type" @tab-click="handlePageClick">
      <el-tab-pane v-for="rank in rankList" :label="rank.name" :name="rank.type"></el-tab-pane>
    </common-tabs>
    <common-list slot="content" v-loading="isLoading">

<!--      <common-search slot="search" @search="handleQuery" @reset="resetQuery"-->
<!--                     v-if="'table,database,sensitive-type,client-ip,sensitive-label,sensitive-word'.indexOf(type)!== -1">-->
<!--        <el-form-->
<!--          ref="queryForm"-->
<!--          :inline="true"-->
<!--          label-width="63px"-->
<!--        >-->
<!--&lt;!&ndash;          <el-form-item label="数据类型" v-if="'table,database'.indexOf(type)!== -1">&ndash;&gt;-->
<!--&lt;!&ndash;            <el-select key="sensitiveFlag" v-model="queryParams.sensitiveFlag">&ndash;&gt;-->
<!--&lt;!&ndash;              <el-option label="全部" :value="2"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;              <el-option label="敏感" :value="0"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;              <el-option label="非敏感" :value="1"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-select>&ndash;&gt;-->
<!--&lt;!&ndash;          </el-form-item>&ndash;&gt;-->

<!--          <el-form-item label="数据库IP" v-if="'table,database'.indexOf(type)!== -1">-->
<!--            <common-input v-model="searchForm.dbIp"></common-input>-->
<!--          </el-form-item>-->

<!--          <el-form-item label="数据库名" v-if="'table,database'.indexOf(type)!== -1">-->
<!--            <common-input v-model="searchForm.dbName"></common-input>-->
<!--          </el-form-item>-->

<!--          <el-form-item label="表名" v-if="'table'.indexOf(type)!== -1">-->
<!--            <common-input v-model="searchForm.tableName"></common-input>-->
<!--          </el-form-item>-->

<!--          <el-form-item label="客户端IP" v-if="'client-ip'.indexOf(type)!== -1">-->
<!--            <common-input v-model="searchForm.sourceIp"></common-input>-->
<!--          </el-form-item>-->

<!--          <el-form-item label="敏感分类" v-if="'sensitive-type'.indexOf(type)!== -1">-->

<!--            <el-select key="sensitiveTypes" v-model="searchForm['sensitiveTypes.typeName']" multiple :collapse-tags="true">-->
<!--              <el-option-->
<!--                v-for="item in sensitiveTypeList"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->

<!--          <el-form-item label="敏感标签" v-if="'sensitive-label'.indexOf(type)!== -1">-->
<!--            <el-select key="sensitiveLabel" v-model="searchForm.sensitiveLabel" multiple :collapse-tags="true">-->
<!--              <el-option-->
<!--                v-for="item in sensitiveTypeList"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->

<!--          <el-form-item label="敏感字段" v-if="'sensitive-word'.indexOf(type)!== -1">-->
<!--            <el-select key="sensitiveWord" v-model="searchForm.sensitiveWord" multiple :collapse-tags="true">-->
<!--              <el-option-->
<!--                v-for="item in sensitiveTypeList"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->

<!--        </el-form>-->
<!--      </common-search>-->

      <common-table :key="queryParams.type" slot="content" :data="list" style="width: 100%">
        <el-table-column label="数据库IP" prop="dbIp" v-if="'table,database'.indexOf(type)!== -1" align="left"/>
        <el-table-column label="数据库端口" prop="dbPort" v-if="'table,database'.indexOf(type)!== -1" align="left"/>
        <el-table-column label="数据库名" prop="dbName" v-if="'table,database'.indexOf(type)!== -1" align="left"/>
        <el-table-column label="表名" prop="tableName" v-if="'table'.indexOf(type)!== -1" align="left" show-overflow-tooltip/>

        <el-table-column label="敏感等级" prop="sensitiveLevelName" v-if="'sensitive-level'.indexOf(type)!== -1"
                         align="left"/>

        <el-table-column label="敏感分类" prop="typeName" v-if="'sensitive-type'.indexOf(type)!== -1" align="left"/>
        <el-table-column label="客户端IP" prop="sourceIp" v-if="'client-ip'.indexOf(type)!== -1" align="left"/>
        <el-table-column label="重要数据" prop="sensitiveLabel" v-if="'sensitive-label'.indexOf(type)!== -1" align="left"/>
        <el-table-column label="敏感字段" prop="sensitiveWord" v-if="'sensitive-word'.indexOf(type)!== -1" align="left"/>

        <el-table-column label="扩散次数" prop="spreadCount" align="left"/>

        <el-table-column label="操作" align="center" width="85" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="goReport(scope.row)">查看报告</el-button>
          </template>
        </el-table-column>
      </common-table>

      <pagination slot="pagination" v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize" @pagination="getSpreadRinking"/>
    </common-list>
  </common-list-tabs>
</template>

<script>
import BaseList from '@/mixins/BaseList'
import Report from './report/index'
import { getSpreadRinking } from '@/api/overview/spread'

export default {
  name: 'ranking',
  mixins: [BaseList],
  components: {
    Report
  },
  data() {
    return {
      sensitiveTypeList: [],// 敏感分类 筛选列表
      sensitiveLabelList: [],// 敏感标签 筛选列表
      sensitiveWordList: [],// 敏感字段 筛选列表
      type: 'table',
      searchForm: {
        dbIp: '',// 数据库IP database,table
        dbName: '',// 数据库名 database,table
        tableName: '',// 表名 table
        'sensitiveTypes.typeName': [],// 敏感分类 sensitive-type
        sourceIp: '',// 客户端IP client-ip
        sensitiveLabel: [],// 敏感标签 sensitive-label
        sensitiveWord: []// 敏感字段 sensitive-word
      },// 搜素条件
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        sensitiveFlag: 0,
        statNames: '',
        aggFilterConds: {
          dbIp: [],
          dbName: [],
          tableName: [],
          sourceIp: [],
          'sensitiveTypes.typeName': [],
          sensitiveLabel: [],
          sensitiveWord: []
        }
      },
      rankList: [
        { name: '数据源(库)', type: 'database', statNames: 'dbIp,dbPort,dbName', search: 'dbIp,dbName,tableName' },
        { name: '数据源(表)', type: 'table', statNames: 'dbIp,dbPort,dbName,tableName', search: 'dbIp,dbName' },
        { name: '敏感等级', type: 'sensitive-level', statNames: 'sensitiveLevelName', search: '' },
        {
          name: '敏感分类',
          type: 'sensitive-type',
          statNames: 'sensitiveTypes.typeName',
          search: 'sensitiveTypes.typeName'
        },
        { name: '客户端IP', type: 'client-ip', statNames: 'sourceIp', search: 'sourceIp' },
        { name: '重要数据', type: 'sensitive-label', statNames: 'sensitiveLabel', search: 'sensitiveLabel' },
        { name: '敏感字段', type: 'sensitive-word', statNames: 'sensitiveWord', search: 'sensitiveWord' }
      ],// 所有排行类型

      list: [],
      total: 0,
      isReport: false,
      reportData: {},
      isLoading: false
    }
  },
  methods: {
    /**
     * 初始化页面数据
     */
    initData() {
      this.type = this.rankList[0].type

      this.handlePageClick()
    },
    /**
     * 查询
     * 查询前清空其他分类下筛选条件
     */
    handleQuery() {
      let { search } = this.rankList.find(r => r.type === this.type)
      Object.keys(this.queryParams.aggFilterConds).forEach(key => {
        if (search.includes(key)) {
          if (this.searchForm[key]) {
            if (this.searchForm[key] instanceof Array) {
              this.queryParams.aggFilterConds[key] = this.searchForm[key]
            } else {
              this.queryParams.aggFilterConds[key] = [this.searchForm[key]]
            }
          } else {
            this.queryParams.aggFilterConds[key] = []
          }

        } else {
          this.queryParams.aggFilterConds[key] = []
        }
      })
      this.getSpreadRinking()

    },
    /**
     * 搜索条件重置
     */
    resetQuery() {
      // 请求参数置空
      Object.keys(this.queryParams.aggFilterConds).forEach(key => this.queryParams.aggFilterConds[key] = [])
      // 筛选条件置空
      Object.keys(this.searchForm).forEach(key => {
        if (this.searchForm[key] instanceof Array) {
          this.searchForm[key] = []
        } else {
          this.searchForm[key] = ''
        }
      })

    },
    /**
     * tabs 切换事件
     * 重置搜索条件
     * 重置分页
     */
    handlePageClick() {
      let tab = this.rankList.find(r => r.type === this.type)
      this.queryParams.statNames = tab.statNames
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10

      this.resetQuery()

      this.getSpreadRinking()
    },

    // ---------------------

    goReport(item) {
      console.log('item: ', item)
      this.reportData.type = this.type
      this.reportData.data = {
        ...item,
        sensitiveFlag: 0
      }

      this.isReport = true
    },
    closeReport() {
      this.isReport = false
    },

    /**
     * 获取列表数据 通用接口
     */
    getSpreadRinking() {
      this.list = []
      this.isLoading = true

      let { type } = this.rankList.find(r => r.type === this.type)

      getSpreadRinking(this.queryParams).then(res => {
        if (res && res.code === 200) {
          this.list = res.data.list
          this.total = res.data.total

          if ('sensitive-type,sensitive-label,sensitive-word'.includes(type)) {
            let list = res.data.pullDownList.reduce((r, c) => {
              r.push({
                label: c,
                value: c
              })
              return r
            }, [])

            if (type === 'sensitive-type') this.sensitiveTypeList = list
            if (type === 'sensitive-label') this.sensitiveLabelList = list
            if (type === 'sensitive-word') this.sensitiveWordList = list
          }

        } else {
          this.list = []
          this.total = 0
          this.handleListTips(res)
        }
      }).finally(() => {
        this.isLoading = false
      })
    }
  },
  mounted() {
    this.initData()
  }
}
</script>
